<template>
	<view class="container">
		<!-- 用户列表信息 -->
		<view class="userInfoCard">
			<view class="cardTitle">
				个人信息：
			</view>
			<view class="editItem" @tap="chooseImage('headImage')">
				<view class="editItem_key">
					头像
				</view>
				<view class="editItem_value">
					<view class="headimageBox">
						<image v-if="userInfo.header" :src="userInfo.header" mode="widthFix" />
						<image v-else src="../../static/image/no_head.png" mode="widthFix" />
					</view>

					<text class="iconfont icon-zhankai"></text>
				</view>
			</view>
			<view class="editItem">
				<view class="editItem_key">
					昵称<text class="iconfont icon-bixutian" style="color: red;"></text>
				</view>
				<view class="editItem_value">
					<input type="text" v-model="userInfo.nickname" placeholder="请输入昵称" />
					<!-- <text class="iconfont icon-zhankai"></text> -->
				</view>
			</view>
			<view class="editItem" @tap="jump('电话绑定')">
				<view class="editItem_key">
					电话号码<text class="iconfont icon-bixutian" style="color: red;"></text>
				</view>
				<view class="editItem_value">
					<text v-if="userInfo.mobile">{{mobileFilter}}</text>
					<text v-else style="color: red;">未绑定</text>
					<text class="iconfont icon-zhankai"></text>
				</view>
			</view>
			<view class="editItem" @tap="jump('菜币')">
				<view class="editItem_key">
					我的菜币
				</view>
				<view class="editItem_value">
					<view class="priceNumStyle">
						<text>{{userInfo.coin}}</text>
						<image mode="widthFix" src="/static/image/cbnew.png"
							style="width: 50rpx;border: none;"></image>
					</view>
					<text class="iconfont icon-zhankai"></text>
				</view>
			</view>
			<view class="editItem" @tap="chooseImage('weChatImage')">
				<view class="editItem_key">
					微信二维码
				</view>
				<view class="editItem_value">
					<view class="headimageBox">
						<image v-if="userInfo.header" :src="userInfo.image" mode="widthFix" />
						<image v-else src="../../static/image/no_head.png" mode="widthFix" />
					</view>

					<text class="iconfont icon-zhankai"></text>
				</view>
			</view>

			<view class="editItem">
				<view class="editItem_key">
					微信号
				</view>
				<view class="editItem_value">
					<input type="text" v-model="userInfo.wx_num" placeholder="请输入微信号" />
				</view>
			</view>
		</view>
	<!--<view class="userInfoCard">
			<view class="cardTitle">
				联系方式(必填)：
			</view>
			<view class="editItem">
				<view class="editItem_key">
					联系人昵称<text class="iconfont icon-bixutian" style="color: red;"></text>：
				</view>
				<view class="editItem_value">
					<view class="editItem_value">
						<input type="text" v-model="userInfo.call" placeholder="请输入联系人昵称" />
					</view>
				</view>
			</view>
		</view> -->
		<view style="font-size: 13px;color: #aba7a7;padding: 25rpx;">请注意 更换图片类项无需点击保存 选择完图片即更新成功 昵称和电话号码为下单必选项</view>
		<view @tap="saveChange()" class="saveBtn">保存并确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowPage: null,
				userInfo: {
					header: '',
					image: ''
				},
			}
		},
		computed: {
			mobileFilter() {
				let reg = /^(.{3}).*(.{4})$/
				return this.userInfo.mobile.replace(reg, '$1****$2')
			}
		},
		onLoad() {
			this.getIsShowHandIdcode()
		},
		onShow() {
			this.getUserInfo()
		},

		methods: {
			async getIsShowHandIdcode() {
				const data = await this.$http('/appapi/member/is_show_hand_idcode')
				console.log("======================================================")
				console.log(data)
				console.log("======================================================")
				this.isShowPage = data
			},
			clickWeixinCode(imgUrl) {
				var that = this
				uni.uploadFile({
					url: "https://qw.lvd8.cn" + '/appapi/member/upload?token=' + uni.getStorageSync(
						"token"),
					name: 'file',
					filePath: imgUrl,
					fileType: 'image',
					success(res) {
						let newImg = JSON.parse(res.data)
						console.log("更新微信号二维码=====")
						that.userInfo.image = newImg.content
					}
				})
			},
			clickHeadImage(imgUrl) {
				var that = this
				uni.uploadFile({
					url: "https://qw.lvd8.cn/" + 'appapi/member/upload_header?token=' + uni.getStorageSync(
						"token"),
					name: 'file',
					filePath: imgUrl,
					fileType: 'image',
					success(res) {
						let newImg = JSON.parse(res.data)
						console.log("更新用户头像=====")
						that.userInfo.header = newImg.content
					}
				})
			},
			chooseImage(type) {
				var that = this
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log()
						let chooseImage = res.tempFilePaths[0]
						if (type == 'headImage') {
							console.log("选择头像")
							that.clickHeadImage(res.tempFilePaths[0])
						}
						if (type == "weChatImage") {
							console.log("选择微信二维码")
							that.clickWeixinCode(res.tempFilePaths[0])
						}
						//刷新数据哦
						//this.getUserInfo()
					}
				});

				console.log(this.userInfo)
			},
			async saveChange() {
				let that = this;
				if (that.userInfo.nickname == "" || that.userInfo.length <= 0) {
					uni.showToast({
						title: "用户名不为空",
						icon: "none",
						duration: 3000
					})
					return
				}
				const data = await that.$http('/appapi/member/updateNick',{
					nick: that.userInfo.nickname,
					wx_num: that.userInfo.wx_num,
					account: that.userInfo.account,
					password: that.userInfo.password,
					address: that.userInfo.address,
					call:that.userInfo.call
				})
				//刷新
				this.getUserInfo()

				uni.showToast({
					title: data.msg,
					icon: "none",
					duration: 3000
				})
			},
			jump(type) {
				let url = ""
				switch (type) {
					case "菜币":
						url = "/pages/my/wallet"
						break;
					case "电话绑定":
						//url = "/pages/bindPhone/bindPhone?phone="
						url = "/pages/bindPhone/bindPhone?phone=" + this.userInfo.mobile
					default:
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			async getUserInfo() {
				const data = await this.$http('/appapi/member/info');
				console.log("--------------getUserInfo--------------");
				console.log(data);
				this.userInfo = data
				if (data.mobile) {
					this.userInfo.mobile = this.mobileFilter(data.mobile)
				}
			},

		}
	}
</script>

<style lang="less" scoped>
	.cardTitle {
		padding: 30rpx 20rpx 0;
		width: 90%;
	}

	.headimageBox {
		border-radius: 50%;
		border: 1px solid #d8d8d8;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.saveBtn {
		width: 70%;
		margin: 120rpx auto;
		background: #FA97B4;
		padding: 20rpx;
		border-radius: 20rpx;
		color: #fff;
		text-align: center;
	}

	.container {
		background-color: #F8F8F8;
		min-height: 100vh;
	}

	.userInfoCard {
		background-color: #fff;
		margin-bottom: 40rpx;

		.priceNumStyle {
			align-items: center;
			display: flex;
			gap: 10rpx;
		}
	}

	.editItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #e4dddd;
		width: 90%;
		box-sizing: border-box;
		margin: auto;

		.editItem_key {
			color: #595959;
		}

		.editItem_value {
			display: flex;
			align-items: center;
			gap: 15rpx;

			input {
				text-align: right;
			}

			image {
				// background-color: #FA97B4;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				text-align: center;
			}
		}
	}

	.editItem:last-of-type {
		border-bottom: none
	}
</style>